<template>
  <div class="hiddenField-container">
    <div class="fieldSearch">
        <i class="iconfont cgsIcon-search"></i>
        <input v-model="searchValue" type="text" class="fieldSearchValue" placeholder="搜索字段">
    </div>
    <div class="allShowHidden" v-if="!searchResult && searchValue.length <=0">
        <button class="allShow" @click="handelAllShow">显示全部</button>
        <button class="allHidden" @click="handelAllHidden">隐藏全部</button>
        <span>显示{{this.showNumber}}列</span>
    </div>
    <ul class="field-list" v-if="!searchResult && searchValue.length <=0">
        <li class="field-item" v-for="item in viewFields" :key="item.name">
            <el-switch
                v-model="item.show"
                width=18
                active-color="#13ce66"
                @change="()=>{showHiddenViewField(item)}">
            </el-switch>
            <!-- 字体图标 -->
            <i class="iconfont cgsIcon-text" v-if="item.dataType === dataType.TEXT"></i>
            <i class="iconfont cgsIcon-radio" v-if="item.dataType === dataType.RADIO"></i>
            <i class="iconfont cgsIcon-date" v-if="item.dataType === dataType.DATE"></i>
            <i class="iconfont cgsIcon-boxes" v-if="item.dataType === dataType.CHECK_BOX"></i>
            <i class="iconfont cgsIcon-attachment" v-if="item.dataType === dataType.ATTACHMENT"></i>
            <i class="iconfont cgsIcon-number" v-if="item.dataType === dataType.NUMBER"></i>
            <span class="fieldType">{{ item.alia }}</span>
        </li>
    </ul>
    <div class="searchResult" v-if="searchResult || searchValue.length > 0">
        <div v-if="searchField.length <= 0">没有搜索结果</div>
        <ul class="field-list" v-if="searchField.length > 0">
            <li class="field-item" v-for="item in searchField" :key="item.name">
                <el-switch
                    v-model="item.show"
                    width=18
                    active-color="#13ce66"
                    @change="()=>{showHiddenViewField(item)}">
                </el-switch>
                <!-- 字体图标 -->
                <i class="iconfont cgsIcon-text" v-if="item.dataType === dataType.TEXT"></i>
                <i class="iconfont cgsIcon-radio" v-if="item.dataType === dataType.RADIO"></i>
                <i class="iconfont cgsIcon-date" v-if="item.dataType === dataType.DATE"></i>
                <i class="iconfont cgsIcon-boxes" v-if="item.dataType === dataType.CHECK_BOX"></i>
                <i class="iconfont cgsIcon-attachment" v-if="item.dataType === dataType.ATTACHMENT"></i>
                <i class="iconfont cgsIcon-number" v-if="item.dataType === dataType.NUMBER"></i>
                <span class="fieldType">{{ item.alia }}</span>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { DataType } from '../../filterConstant'
export default {
    props: {
        fields:{
            type:Array,
            default:function(){
                return []
            },
	    },
        hiddenFields:{
            type:Array,
            default:function(){
                return []
            },
	    },
    },
    data(){
        return {
            dataType: DataType,
            
            showField:[],
            searchResult: false,
            searchField: [],
            searchValue: ''
        }
    },
    methods:{
        showHiddenViewField(item){
            // debugger
            if(item.show){
                let index = this.hiddenViewFields.indexOf(item.name);
                if(index > -1){
                    this.hiddenViewFields.splice(index,1);
                }
            }else{
                if(this.hiddenViewFields.indexOf(item.name) <= -1){
                    this.hiddenViewFields.push(item.name);
                }
            }
            this.$forceUpdate()
            this.$emit('showHiddenViewField',this.hiddenViewFields);
        },
        handelAllShow(){
            this.viewFields.map((f)=>{
                let index = this.hiddenViewFields.indexOf(f.name);
                if(index > -1){
                    this.hiddenViewFields.splice(index, 1);
                }
            })
            this.$emit('showHiddenViewField',this.hiddenViewFields);
        },
        handelAllHidden(){
            this.viewFields.map((f)=>{
                if(this.hiddenViewFields.indexOf(f.name) <= -1){
                    this.hiddenViewFields.push(f.name);
                }
            })
            this.$emit('showHiddenViewField',this.hiddenViewFields);
        },
    },
    computed: {
        viewFields(){
            let hiddenFields = this.hiddenFields
            return this.fields.map((f,i)=>{
                f.show = true
                if(hiddenFields){
                    hiddenFields.map(t=>{
                        if(f.name === t){
                            f.show = false;
                        }
                    })
                }
                return f;
            })
        },
        hiddenViewFields(){
            return this.hiddenFields;
        },
        showNumber(){
            return this.fields.length - this.hiddenFields.length;
        }
    },
    watch:{
        searchValue(newData){
            if(newData.trim().length>0){
                this.viewFields.map((f)=>{
                    if(f.alia.indexOf(newData) > -1){
                        this.searchField.push(f);
                    }else{
                        let index = this.searchField.indexOf(f);
                        if(index > -1){
                            this.searchField.splice(index,1);
                        }
                    }
                })
            }else if(!newData){
                this.searchField = [];
            }
        }
    }
}
</script>

<style lang="less">
.hiddenField-container{
    width: 100%;
    padding: 16px 0px;
    .allShowHidden{
        margin-top: 20px;
        >button{
            border: none;
            background-color: #eee;
            padding: 4px 8px;
            color: rgb(117,117,117);
            margin-right: 12px;
            cursor: pointer;
        }
        >span{
            color: rgb(117,117,117);
            float: right;
        }
        >button:hover{
            color: #2196f3;
            background-color: rgb(226, 226, 226);
        }
        ::after{
            content:'';
            display: block;
            clear: both;
        }
    }
    .fieldSearch{
        border-bottom: 1px solid #eee;
        width: 100%;
        font-size: 14px;
        padding:1px;
        >i.cgsIcon-search{
           font-size: 16px; 
           color: #999;
           vertical-align: middle;
           margin: 4px;
           margin-right: 6px;
        }
        >.fieldSearchValue{
            border: none;
            color: #000!important;
            vertical-align: middle;
            height: 100%;
            width: 80%;
            padding:4px;
            &::placeholder{
                color: #999;
            }
        }
    }
    .field-list{
        padding-left: 18px;
        .field-item{
            margin-top: 20px;
            color: #666;
            .el-switch{
                margin-right: 20px;
                cursor: pointer;
            }
            .el-switch .el-switch__core{
                height: 10px;
                border-radius: 8px;
                cursor: pointer;
            }
            .el-switch .el-switch__core::after{
                width: 6px;
                height: 6px;
            }
            .el-switch.is-checked .el-switch__core::after{
                margin-left: -7px;
            }
            >i{
                font-size: 18px;
                vertical-align: middle;
                margin-right: 6px;
            }
            >span.fieldType{
                display: inline-block;
                vertical-align: middle;
                font-size: 16px;
            }
        }
    }
    .searchResult{
        margin: 20px 0 30px;
        color: #bdbdbd;
    }
}
</style>